<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>车辆类型</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>

            <el-form :inline="true" :model="queryCarTypeData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="queryCarTypeData.typeName" placeholder="请输入类型名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showAllCarType">查询</el-button>
                    <el-button type="primary" @click="showAddForm({})">添加</el-button>
                </el-form-item>
            </el-form>

            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="汽车类型id">
                    </el-table-column>
                    <el-table-column
                            prop="typeName"
                            label="汽车类型名">
                    </el-table-column>
                    <el-table-column
                            prop="startPrice"
                            label="起步租价(元/天)">
                    </el-table-column>
                    <el-table-column
                            prop="addtime"
                            label="添加时间">
                    </el-table-column>
                    <el-table-column
                            prop="url"
                            label="子路由">
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <!-- 修改 -->
                            <el-button type="primary" icon="el-icon-edit" circle @click="showAddForm(scope.row)"></el-button>
                            <!-- 删除 -->
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteCarType(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 7, 9]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <el-dialog
                        title="新增车辆类型"
                        :visible.sync="addForm"
                        width="30%">
                <span>
                    <!-- 新增车辆信息 -->
                    <el-form ref="form" :model="addCarTypeForm" :rules="rulesForm" label-position="left" label-width="80px">
                        <el-input v-model="addCarTypeForm.id" type="hidden"></el-input>
                        <el-form-item label="类型名称" prop="typeName">
                            <el-input v-model="addCarTypeForm.typeName"></el-input>
                        </el-form-item>
                        <el-form-item label="起步租价(元/天)" prop="startPrice">
                            <el-input v-model.number="addCarTypeForm.startPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="子路由">
                            <el-input v-model="addCarTypeForm.url"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="addForm = false">取 消</el-button>
                    <el-button type="primary" @click="addCarType('form')">确 定</el-button>
                    </span>
                </el-dialog>
            </template>

        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                queryCarTypeData: {
                    typeName: ''
                },
                tableData: [],
                addCarTypeForm: {
                    id: '',
                    typeName: '',
                    startPrice: '',
                    url: ''
                },
                rulesForm: {
                    typeName: [
                        { required: true, message: '类型不能为空',trigger: 'blur'},
                    ],
                    startPrice: [
                        { required: true, message: '起步租价不能为空',trigger: 'blur'},
                        { type: 'number', message: '起步租价必须位数字',trigger: 'blur'}
                    ]
                },
                addForm : false,
                pageSize: 5,
                currentPage: 1,
                total: 0,
            }
        },
        methods:{
            handleSizeChange(value) {
                this.pageSize = value;
                this.showAllCarType();
            },
            handleCurrentChange(value) {
                this.currentPage = value;
                this.showAllCarType();
            },
            // 查询全部的汽车类型
            showAllCarType() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/cartype/showAllCarType',
                    params: {
                        pageno: this.currentPage,
                        pagesize: this.pageSize,
                        typeName: this.queryCarTypeData.typeName
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.tableData = result.data.listData;
                        this.total = result.data.object.total;
                    }
                })
            },
            // 显示新增的form表单
            showAddForm(row) {
                this.addForm = true;
                this.addCarTypeForm = row;
            },
            // 新增车辆类型
            addCarType(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var startPrice = parseInt(this.addCarTypeForm.startPrice);
                        if ( startPrice > 0 ){
                            if (this.addCarTypeForm.id == null) {
                                this.$axios({
                                    method: 'post',
                                    url: 'clms-lease/cartype/addCarType',
                                    data : this.addCarTypeForm
                                }).then( result => {
                                    if (result.data.code == 200) {
                                        this.addForm = false;
                                        this.$message.success(result.data.message);
                                        this.showAllCarType()
                                    } else {
                                        this.$message.error(result.data.message)
                                    }
                                })
                            } else {
                                this.$axios({
                                    method: 'post',
                                    url: 'clms-lease/cartype/updateCarType',
                                    data : this.addCarTypeForm
                                }).then( result => {
                                    if (result.data.code == 200) {
                                        this.addForm = false;
                                        this.$message.success(result.data.message);
                                        this.showAllCarType()
                                    } else {
                                        this.$message.error(result.data.message)
                                    }
                                })

                            }
                        } else {
                            this.$message.error("起步价不能为负数")
                        }
                    } else {
                       this.$message.error("起步价有误")
                    }
                });
            },
            // 删除汽车类型
            deleteCarType(id) {
                this.$confirm('确定删除此类型吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method: 'get',
                        url: 'clms-lease/cartype/deleteCarType',
                        params: {
                            id: id
                        }
                    }).then( result => {
                        if (result.data.code == 200) {
                            this.$message.success(result.data.message);
                            this.currentPage = 1;
                            this.showAllCarType()
                        } else {
                            this.$message.error(result.data.message)
                        }
                    })
                });
            }
        },
        created() {
            this.showAllCarType()
        }
    }
</script>